import {messages} from "share/common";
/**
 * 订票申请单 退改签信息
 */
import React from 'react'
import { connect } from 'react-redux'
import { Form, Card, Row, Col } from 'antd'

import moment from 'moment'
import 'styles/request/booker-request/reschedule-refund-info.scss'

class RescheduleRefundInfo extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      rescheduleList: [],
      refundList: [],
    }
  }

  componentDidMount() {
    this.getList()
  }

  getList = () => {
    let rescheduleList = [];
    let refundList = [];
    // type：1002（改签）、1003（退票）
    this.props.info.travelOperationRecords.map(item => {
      if (item.type === 1002) {
        rescheduleList.push(item)
      } else if (item.type === 1003) {
        refundList.push(item)
      }
    });
    this.setState({ rescheduleList, refundList })
  };

  renderInfo = (label, value) => {
    let col_span_title = this.props.language.code === 'zh_cn' ? 6 : 9;
    let col_span_content = this.props.language.code === 'zh_cn' ? 18 : 15;
    return (
      <Row>
        <Col span={col_span_title}>{label}：</Col>
        <Col span={col_span_content}>{value}</Col>
      </Row>
    )
  };

  render() {
    const { rescheduleList, refundList } = this.state;
    const locale = this.props.language.locale;
    return (
      <div className="reschedule-refund-info tab-container">
        <h3 className="sub-header-title">{messages('request.key15'/*退改签信息*/)}</h3>
        {rescheduleList.map((item, index) => {
          return (
            <Card key={index} className={this.props.language.locale === 'en' ? 'card-style-en' : ''}>
              <Row>
                <Col span={8}>{this.renderInfo(messages('request.key18'/*类型*/),
                  messages('request.key448',{arg1: item.operationOrderNumber}/*改签 {arg1} 张*/))}</Col>
                <Col span={8}>{this.renderInfo(messages('request.key19'/*申请时间*/),
                  moment(item.lastModifiedDate).format('YYYY-MM-DD HH:mm'))}</Col>
                <Col span={8}>{this.renderInfo(messages('request.key20'/*申请人*/), item.name)}</Col>
              </Row>
              <Row>
                <Col span={8}>{this.renderInfo(messages('request.key21'/*是否补录*/),
                  item.isAdditionalRecord ? messages('request.key22'/*是*/) : messages('request.key23'/*否*/))}</Col>
                <Col span={8}>{this.renderInfo(messages('request.key24'/*是否需审批*/),
                  item.skipWorkflow ? messages('request.key23'/*否*/) : messages('request.key22'/*是*/))}</Col>
                <Col span={8}>
                  <Row>
                    <Col span={locale === 'zh' ? 6 : 9} className="line-height-18">{messages('request.key25'/*改签原因*/)}：</Col>
                    <Col span={locale === 'zh' ? 18 : 15}>
                      {item.isPersonalReason ? messages('request.key26'/*个人*/) : messages('request.key27'/*项目*/)}
                    </Col>
                  </Row>
                </Col>
              </Row>
              <Row>
                <Col span={locale === 'zh' ? 2 : 3} className="line-height-18">{messages('request.key28'/*改签备注*/)}：</Col>
                <Col span={locale === 'zh' ? 22 : 21}>{item.endorseRemark || '-'}</Col>
              </Row>
              {!item.skipWorkflow && (
                <Row>
                  {item.approvalStatus === 1001 ? <span style={{color:'red'}}>{item.rejectReason}</span> :
                    item.approvalStatus === 1002 ? messages('request.key29'/*审批中*/) : messages('request.key30'/*已通过*/)}
                </Row>
              )}
            </Card>
          )
        })}
        {refundList.map(item => {
          return (
            <Card key={item.travelOperationRecordOID}>
              <Row>
                <Col span={8}>{this.renderInfo(messages('request.key18'/*类型*/),
                  messages('request.key449',{arg1: item.operationOrderNumber}/*退票 {arg1} 张*/))}</Col>
                <Col span={8}>{this.renderInfo(messages('request.key19'/*申请时间*/),
                  moment(item.lastModifiedDate).format('YYYY-MM-DD HH:mm'))}</Col>
                <Col span={8}>{this.renderInfo(messages('request.key20'/*申请人*/), item.name)}</Col>
              </Row>
              <Row>
                <Col span={8}>{this.renderInfo(messages('request.key21'/*是否补录*/),
                  item.isAdditionalRecord ? messages('request.key22'/*是*/) : messages('request.key23'/*否*/))}</Col>
                <Col span={8}>{this.renderInfo(messages('request.key24'/*是否需审批*/),
                  item.skipWorkflow ? messages('request.key23'/*否*/) : messages('request.key22'/*是*/))}</Col>
                <Col span={8}>
                  <Row>
                    <Col span={locale === 'zh' ? 6 : 9}>{messages('request.key31'/*退票原因*/)}：</Col>
                    <Col span={locale === 'zh' ? 18 : 15}>
                      {item.isPersonalReason ? messages('request.key26'/*个人*/) : messages('request.key27'/*项目*/)}
                    </Col>
                  </Row>
                </Col>
              </Row>
              <Row>
                <Col span={locale === 'zh' ? 2 : 3}>{messages('request.key32'/*退票备注*/)}：</Col>
                <Col span={locale === 'zh' ? 22 : 21}>{item.refundRemark || '-'}</Col>
              </Row>
              {!item.skipWorkflow && (
                <Row>
                  {item.approvalStatus === 1001 ? <span style={{color:'red'}}>{item.rejectReason}</span> :
                    item.approvalStatus === 1002 ? messages('request.key29'/*审批中*/) : messages('request.key30'/*已通过*/)}
                </Row>
              )}
            </Card>
          )
        })}
      </div>
    )
  }
}

RescheduleRefundInfo.propTypes = {
  info: React.PropTypes.object
};

RescheduleRefundInfo.defaultProps={
  info: {}
};

function mapStateToProps(state) {
  return {
    language: state.main.language
  }
}

const wrappedRescheduleRefundInfo = Form.create()(RescheduleRefundInfo);

export default connect(mapStateToProps)(wrappedRescheduleRefundInfo)
